<template>
    <div class="head">
        <div class="head-city" @click="isshow=!isshow">
            {{livecity}}<i class="fa fa-caret-down" aria-hidden="true"></i>
        </div>
        <router-link tag="div" to="/search" class="head-search">
            <i class="fa fa-search" aria-hidden="true"></i>
            <input type="text" class="head-search-input" placeholder="瘦脸针">
        </router-link>
        <div class="login-img">

        </div>
        <div class="city-page" v-if="isshow">
            <div class="left-city-page">
                <ul class="left-city-list">
                    <li :class="{active:provincecityactive==i}"
                        v-for="(item,i) in provincecitylist"
                        :key="item.name"
                        @click="provincecityactive=i,getcitylist()"
                    >
                        {{item.name}}
                    </li>

                </ul>
            </div>
            <div class="right-city-page">
                <ul class="right-city-list">
                    <li v-for="(item,i) in citylist"
                        :key="item.name"
                        :class="{cityactive:cityactive==i}"
                        @click="cityactive=i,changecity()"
                    >
                        {{item.name}}
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
    import {mapActions} from 'vuex'

    export default {
        data() {
            return {
                isshow: false,
                provincecitylist: [],
                provincecityactive: -1,
                citylist: [],
                cityactive: -1,
                livecity: "定位中"
            }
        },
        methods: {
            ...mapActions(['getprovincecity', 'getcity']),
            getcitylist() {
                this.getcity({provinceid: this.provincecitylist[this.provincecityactive].adcode}).then((data) => {
                    this.citylist = data.data
                    this.cityactive=-1
                })
            },
            changecity() {
                this.isshow = false
                this.livecity = this.citylist[this.cityactive].name
            }
        },
        mounted() {
            this.getprovincecity().then((data) => {
                this.provincecitylist = data.data
            })
        }
    }
</script>

<style scoped lang="scss">
    .head {
        width: 100%;
        height: 50px;
        padding: 10px;
        box-sizing: border-box;
        color: #333333;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .head-city {
        font-size: 16px;
        align-items: center;
    }

    .fa-caret-down {
        font-size: 10px;
    }

    .head-search {
        width: 240px;
        height: 100%;
        background-color: #F5F5F5;
        color: #AAABB3;
        border-radius: 10px;
        display: flex;
        align-items: center;
    }

    .head-search i {
        display: inline-block;
        display: flex;
        width: 26px;
        align-items: center;
        justify-content: center;
    }

    .head-search input {
        height: 25px;
        font-size: 14px;
        flex: 1;
    }

    .head-search input::placeholder {
        color: #AAABB3;

    }

    .login-img {
        display: flex;
        height: 100%;
        width: 30px;
        background: url("../assets/login-713931fb83.png") no-repeat center /cover;
    }

    .city-page {
        width: 100%;
        position: absolute;
        top: 49px;
        left: 0;
        z-index: 9998;
        height: calc(100% - 50px);
        display: flex;
        background-color: #FFFFFF;
    }

    .left-city-page {
        width: 150px;
        height: calc(100vh - 50px);
        overflow-y: scroll;

        .left-city-list {
            width: 100%;
            background-color: #F5F5F5;

            li {
                padding: 10px;
                font-size: 12px;
                color: #777777;
                position: relative;

                &.active {
                    background-color: #fff;
                    color: #69D7CC;

                }

                &.active:before {
                    content: '';
                    width: 2px;
                    height: 100%;
                    display: inline-block;
                    position: absolute;
                    left: 0;
                    top: 0;
                    background-color: #69D7CC;
                }
            }
        }
    }

    .right-city-page {
        background-color: #fff;
        flex: 1;
        height: calc(100vh - 50px);
        overflow-y: scroll;

    }

    .right-city-list {
        li {
            padding: 10px;
            font-size: 12px;
            color: #777777;
            position: relative;

            &.cityactive {
                background-color: #fff;
                color: #69D7CC;

            }

            &.cityactive:before {
                content: '';
                width: 2px;
                height: 100%;
                display: inline-block;
                position: absolute;
                left: 0;
                top: 0;
                background-color: #69D7CC;
            }
        }
    }
</style>